<template>
  <div class="app-container">
    <el-form :model="form" label-width="100px" :rules="formRules" ref="form" class="demo-ruleForm">
      <!--公司名称、法人代表、成立时间、联系方式-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="companyName" label="企业名称">
            <el-input placeholder="请输入认证企业的名称" v-model="form.companyName" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyLegalPerson" label="法人代表">
            <el-input placeholder="请输入认证企业的法人代表名称" v-model="form.companyLegalPerson" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companySetUpTime" label="成立时间">
            <el-date-picker placeholder="请选择企业成立时间" v-model="form.companySetUpTime" class="filter-item" auto-complete="off" type="date"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyContactWay" label="联系方式">
            <el-input placeholder="请输入认证企业联系方式" v-model="form.companyContactWay" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--营业执照、省、市、详细地址-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="companyCreditCode" label="营业执照">
            <el-input placeholder="请输入认证企业营业执照注册号(统一社会信用代码)" v-model.trim="form.companyCreditCode" class="filter-item" auto-complete="off" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyProvince" label="所属省份">
            <el-input placeholder="请输入认证企业所属省份" v-model="form.companyProvince" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyCity" label="所属城市">
            <el-input placeholder="请输入认证企业所属城市" v-model="form.companyCity" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyAddress" label="详细地址">
            <el-input placeholder="请输入认证企业详细地址" v-model="form.companyAddress" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--登录用户真实姓名、登录用户身份张号、登录平台手机号、登录平台昵称-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="companyUserName" label="真实姓名">
            <el-input placeholder="请输入认证企业绑定用户真实姓名" v-model="form.companyUserName" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyUserIdentity" label="证件号">
            <el-input placeholder="请输入认证企业绑定用户的身份证号" v-model="form.companyUserIdentity" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyUserPhone" label="平台账户">
            <el-input placeholder="请输入认证企业绑定用户的平台手机号" v-model.trim="form.companyUserPhone" class="filter-item" auto-complete="off" disabled/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyUserNickName" label="平台昵称">
            <el-input placeholder="请输入认证企业绑定用户的平台昵称" v-model="form.companyUserNickName" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--企业邮箱、企业官网、认证时间-->
      <el-row :gutter="0">
        <el-col :span="8">
          <el-form-item prop="companyMail" label="企业邮箱">
            <el-input placeholder="请输入认证企业的企业邮箱" v-model="form.companyMail" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="companyOfficialWebsite" label="公司官网">
            <el-input placeholder="请输入认证企业的公司官网(选填)" v-model="form.companyOfficialWebsite" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="companyValidityPeriodCertification" label="认证有效期">
            <el-date-picker v-model="form.companyValidityPeriodCertification" :unlink-panels="pageData.unlinkPanels" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <!--开户名称、开户银行、对公账户-->
      <el-row :gutter="0">
        <el-col :span="6">
          <el-form-item prop="companyBankPersonName" label="开户名称">
            <el-input placeholder="请输入认证企业开户名称(企业名称)" v-model="form.companyBankPersonName" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyBank" label="开户银行">
            <el-input placeholder="请输入认证企业开户行全称" v-model="form.companyBank" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyBankAccount" label="对公账号">
            <el-input placeholder="请输入认证企业的对公账号" v-model="form.companyBankAccount" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item prop="companyIntroduceTitle" label="分享标题">
            <el-input placeholder="请输入企业介绍页分享标题" v-model="form.companyIntroduceTitle" class="filter-item" auto-complete="off"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--认证类型、审核状态-->
      <el-row :gutter="0">
        <el-col :span="12">
          <el-form-item prop="companyAuthType" label="认证类型">
            <el-radio :label="1" v-model="form.companyAuthType">供应商企业</el-radio>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="companyStatus" label="审核状态">
            <el-radio :label="0" v-model="form.companyStatus">未通过</el-radio>
            <el-radio :label="1" v-model="form.companyStatus">通过</el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <!--图片上传区域-->
      <el-row :gutter="0">
        <el-col :span="8">
          <el-form-item prop="companyImage" label="企业宣传图">
            <el-upload
              class="avatar-uploader"
              action="/api/cms/common/uploadFile"
              :show-file-list="false"
              :on-success="handleCompanyImageUploadSuccess">
              <img v-if="form.companyImage" :src="form.companyImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="companyBusinessLicense" label="营业执照">
            <el-upload
              class="avatar-uploader"
              action="/api/cms/common/uploadFile"
              :show-file-list="false"
              :on-success="handleCompanyBusinessLicenseUploadSuccess">
              <img v-if="form.companyBusinessLicense" :src="form.companyBusinessLicense" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item prop="companyIntroduceImage" label="分享图">
            <el-upload
              class="avatar-uploader"
              action="/api/cms/common/uploadFile"
              :show-file-list="false"
              :on-success="handleCompanyIntroduceImageUploadSuccess">
              <img v-if="form.companyIntroduceImage" :src="form.companyIntroduceImage" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="0">
        <el-col :span="12">
          <el-form-item prop="companyUserIdentityPictureFront" label="身份证(正面)">
            <el-upload
              class="avatar-uploader"
              action="/api/cms/common/uploadFile"
              :show-file-list="false"
              :on-success="handleCompanyUserIdentityPictureFrontUploadSuccess">
              <img v-if="form.companyUserIdentityPictureFront" :src="form.companyUserIdentityPictureFront" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
            </el-upload>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item prop="companyUserIdentityPictureBack" label="身份证(背面)">
            <el-upload
              class="avatar-uploader"
              action="/api/cms/common/uploadFile"
              :show-file-list="false"
              :on-success="handleCompanyUserIdentityPictureBackUploadSuccess">
              <img v-if="form.companyUserIdentityPictureBack" :src="form.companyUserIdentityPictureBack" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" style="line-height: 175px"></i>
            </el-upload>
          </el-form-item>
        </el-col>
      </el-row>
      <!--企业介绍-->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-form-item prop="companyIntroduce" label="企业介绍">
            <el-input placeholder="请输入认证企业的企业介绍" v-model="form.companyIntroduce" class="filter-item" auto-complete="off" type="textarea" :rows="4"/>
          </el-form-item>
        </el-col>
      </el-row>
      <!--企业介绍页-->
      <el-row :gutter="0">
        <el-col :span="24">
          <vue-ueditor-wrap v-model="form.companyIntroduceHtml" :config="pageData.editorConfig"></vue-ueditor-wrap>
        </el-col>
      </el-row>
      <!--保存按钮-->
      <el-row :gutter="0">
        <el-col :span="24">
          <el-button type="primary" @click.native.prevent="handleSaveButtonClick('form')">保存认证信息</el-button>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  // 组件引入
  // 方法工具引入
  import { PermissionsToDetectFormUser } from '@/utils/PermissionsDetect';
  import { getPermission } from '@/utils/UserCookies';
  // 接口引入
  import { loadCmsCompanyData,updateCmsCompanyData } from "@/api/customer";
  export default {
    name: "edit",
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data() {
      return {
        pageData:{
          editorConfig: {
            autoHeightEnabled: false,// 编辑器不自动被内容撑高
            initialFrameHeight: 240,// 初始容器高度
            initialFrameWidth: '100%'// 初始容器宽度
          },// 编辑器配置
          // 取消日期选择器联动
          unlinkPanels: true,
        },// 页面配置数据
        form:{
          companyAuthId: "",
          companyName: "",
          companyLegalPerson: "",
          companySetUpTime: "",
          companyContactWay: "",
          companyCreditCode: "",
          companyProvince: "",
          companyCity: "",
          companyAddress: "",
          companyUserName: "",
          companyUserIdentity: "",
          companyUserPhone: "",
          companyUserNickName: "",
          companyMail: "",
          companyOfficialWebsite: "",
          companyValidityPeriodCertification: "",
          companyBankPersonName: "",
          companyBank: "",
          companyBankAccount: "",
          companyIntroduceTitle: "",
          companyAuthType: 1,
          companyStatus: 0,
          companyImage: "",
          companyBusinessLicense: "",
          companyUserIdentityPictureFront: "",
          companyUserIdentityPictureBack: "",
          companyIntroduceImage: "",
          companyIntroduce: "",
          companyIntroduceHtml: "",
          companyValidityPeriodCertificationStart: "",
          companyValidityPeriodCertificationEnd: ""
        },// 页面表单
        formRules: {},// 表单验证
        responseData: {},// 接口响应数据
      }
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods:{
      // 事件函数
      handlePageInit(){
        this.loadCmsCompanyData();
      },
      handleCompanyImageUploadSuccess(response){
        this.form.companyImage = response.data;
      },// 企业宣传图上传成功
      handleCompanyBusinessLicenseUploadSuccess(response){
        this.form.companyBusinessLicense = response.data;
      },// 营业执照上传成功
      handleCompanyIntroduceImageUploadSuccess(response){
        this.form.companyIntroduceImage = response.data;
      },// 分享图上传成功
      handleCompanyUserIdentityPictureFrontUploadSuccess(response){
        this.form.companyUserIdentityPictureFront = response.data;
      },// 证件照正面上传成功
      handleCompanyUserIdentityPictureBackUploadSuccess(response){
        this.form.companyUserIdentityPictureBack = response.data;
      },// 证件照背面上传成功
      handleSaveButtonClick(formName){
        this.$refs[formName].validate((valid) => {
          if (!PermissionsToDetectFormUser(getPermission(), "500001")){
            this.$message.warning('您的权限不足，无法使用此功能，请联系管理员');
            return;
          }
          if (valid) {
            this.$confirm('此操作将会保存当前数据, 请核对后继续?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // 创建时间转换
              if (this.form.companySetUpTime !== ""){
                let date1 = new Date(this.form.companySetUpTime);
                this.form.companySetUpTime = date1.getFullYear() + '-' + (date1.getMonth() + 1) + '-' + date1.getDate();
              }
              // 发布时间转换
              if (this.form.companyValidityPeriodCertification !== ''){
                let startData = new Date(this.form.companyValidityPeriodCertification[0]);
                this.form.companyValidityPeriodCertificationStart = startData.getFullYear() + '-' + (startData.getMonth() + 1) + '-' + startData.getDate();

                let endData = new Date(this.form.companyValidityPeriodCertification[1]);
                this.form.companyValidityPeriodCertificationEnd = endData.getFullYear() + '-' + (endData.getMonth() + 1) + '-' + endData.getDate();
              }
              this.updateCmsCompanyData();
            }).catch((cancel) => {
              console.log(cancel);
              this.$message.info("已取消操作");
              this.pageData.loading = false;
            });
          }
        })
      },// 保存按钮点击事件
      loadCmsCompanyData(){
        let param = {companyAuthId: this.form.companyAuthId};
        loadCmsCompanyData(param).then(response => {
          if (response.code === "200"){
            this.form = response.data;
            let startData = this.form.companyValidityPeriodCertificationStart;
            let endData = this.form.companyValidityPeriodCertificationEnd;
            let dateList = [];
            dateList.push(new Date(startData));
            dateList.push(new Date(endData));
            this.form.companyValidityPeriodCertification = dateList;
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 获取修改页数据
      updateCmsCompanyData(){
        updateCmsCompanyData(this.form).then(response => {
          if (response.code === "200"){
            this.pageData.loading = false;
            this.$message.success("保存成功");
            this.$jump.push({path: "/customer/company"});
          } else {
            this.$message.warning(response.message);
          }
        }).catch(close => {
          console.log(close);
        });
      },// 更新企业认证数据
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created: function () {
      let _this = this;
      _this.form.companyAuthId = _this.$route.query.companyAuthId;
      setTimeout(function () {
        _this.handlePageInit();
      }, 800);
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {},
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
  };
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
</style>
